<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="8" style="text-align: left">
          <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                     :loading="downloadLoading" icon="el-icon-download" @click="exportExcel">导出
          </el-button>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <el-input size="small" style="width: 200px" class="filter-item fsc-search" placeholder="订单号-回车查询"
                    v-model="listQuery.condition.ownerOrderNo" @keyup.enter.native="searchClick"></el-input>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">
            搜索
          </el-button>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                     @click="moreClick">更多
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="noticeNo">通知单号</el-checkbox>
                  <el-checkbox label="ownerId">客户</el-checkbox>
                  <el-checkbox label="ownerOrderNo">客户订单号</el-checkbox>
                  <el-checkbox label="lotNo1">车架号</el-checkbox>
                  <el-checkbox label="carrierName">供应商</el-checkbox>
                  <el-checkbox label="materielId">车型</el-checkbox>
                  <el-checkbox label="materielName">车型描述</el-checkbox>
                  <el-checkbox label="driverName">司机</el-checkbox>
                  <el-checkbox label="plateNumber">车牌号</el-checkbox>
                  <el-checkbox label="driverPhone">司机联系方式</el-checkbox>
                  <el-checkbox label="noticeLineStatus">出库状态</el-checkbox>
                  <el-checkbox label="inboundStatus">入库状态</el-checkbox>
                  <el-checkbox label="inspectStatus">质检状态</el-checkbox>
                  <el-checkbox label="prepareLineStatus">备料状态</el-checkbox>
                  <el-checkbox label="preparetor">备料员</el-checkbox>
                  <el-checkbox label="storeHouseName">发货仓库</el-checkbox>
                  <el-checkbox label="expectDate">预计出库时间</el-checkbox>
                  <el-checkbox label="destLocationName">目的地</el-checkbox>
                  <el-checkbox label="shipmentTime">调度时间</el-checkbox>
                  <el-checkbox label="carrierName">承运商</el-checkbox>
                  <el-checkbox label="plateNumber">车牌</el-checkbox>
                  <el-checkbox label="remarks">备注</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div v-show="searchFlag" style="height: auto;margin-top: 10px;">
      <el-form ref="form" :model="listQuery.condition" label-width="100px" :inline="true">
        <el-form-item label="单据状态">
          <el-select v-model="listQuery.condition.status" placeholder="请选择单据状态">
            <el-option label="未选择" value=""></el-option>
            <el-option label="未出库" value="10"></el-option>
            <el-option label="部分出库" value="20"></el-option>
            <el-option label="全部出库" value="30"></el-option>
            <el-option label="取消出库" value="50"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车架号">
          <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="listQuery.condition.lotNo1"></el-input>-->
          <el-input type="textarea" :rows="2" style="width: 250px"
                    v-model="listQuery.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
        </el-form-item>
        <el-form-item label="客户">
          <el-input placeholder="请输入客户" class="w200" clearable v-model="listQuery.condition.ownerId"></el-input>
        </el-form-item>
        <el-form-item label="调度时间">
          <el-date-picker class="w184"
                          v-model="listQuery.condition.shipmentStartDate"
                          value-format = 'yyyy-MM-dd'
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>-
          <el-date-picker class="w184"
                          v-model="listQuery.condition.shipmentEndDate"
                          value-format = 'yyyy-MM-dd'
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker class="w184"
                          v-model="listQuery.condition.startDate"
                          value-format = 'yyyy-MM-dd'
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>-
          <el-date-picker class="w184"
                          v-model="listQuery.condition.endDate"
                          value-format = 'yyyy-MM-dd'
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="clean:both"></div>

    <el-table ref="paymentTable" :data="outboundNoticeList" v-loading="listLoading" element-loading-text="加载中" border
              fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableThead'
                       :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'noticeLineStatus'">{{scope.row[value.key] | noticeHeadStatusFilter}}</div>
          <div v-else-if="value.key === 'prepareLineStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else-if="value.key === 'inboundStatus'">{{scope.row[value.key] | inboundLineStatusFilter}}</div>
          <div v-else-if="value.key === 'inspectStatus'">{{scope.row[value.key] | inboundInspectStatusFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import * as outboundNoticeAPI from '@/api/outbound/outboundNotice'
  import waves from '@/directive/waves' // 水波纹指令
  import * as Utils from '@/utils/index'
  const defautlTableThead = [

    { key: 'noticeNo', title: '通知单号', width: 140 },
    { key: 'ownerId', title: '客户', width: '' },
    { key: 'ownerOrderNo', title: '客户订单号', width: 130 },
    { key: 'lotNo1', title: '车架号', width: 160 },
    { key: 'carrierName', title: '供应商', width: 180 },
    { key: 'materielId', title: '车型', width: '' },
    { key: 'materielName', title: '车型描述', width: '' },
    { key: 'driverName', title: '司机', width: '' },
    { key: 'plateNumber', title: '车牌号', width: '' },
    { key: 'driverPhone', title: '司机联系方式', width: 150 },
    { key: 'noticeLineStatus', title: '出库状态', width: '' },
    { key: 'inboundStatus', title: '入库状态', width: '' },
    { key: 'inspectStatus', title: '质检状态', width: '' },
    { key: 'prepareLineStatus', title: '备料状态', width: '' },
    { key: 'preparetor', title: '备料员', width: '' },
    { key: 'storeHouseName', title: '发货仓库', width: '' },
    { key: 'expectDate', title: '预计出库时间', width: '' },
    { key: 'createDate', title: '出库时间', width: '' },
    { key: 'destLocationName', title: '目的地', width: 150 },
    { key: 'shipmentTime', title: '调度时间', width: 150 },
    { key: 'carrierName', title: '承运商', width: 210 },
    { key: 'plateNumber', title: '车牌', width: '' },
    { key: 'remarks', title: '备注', width: '', fixed: 'right' }
  ]
  export default {
    name: 'payment',
    directives: {
      waves
    },
    data() {
      return {
        theadCheckVal: [
          'noticeNo',
          'ownerId',
          'ownerOrderNo',
          'lotNo1',
          'carrierName',
          'materielId',
          'materielName',
          'driverName',
          'plateNumber',
          'driverPhone',
          'noticeLineStatus',
          'inboundStatus',
          'inspectStatus',
          'prepareLineStatus',
          'preparetor',
          'storeHouseName',
          'expectDate',
          'createDate',
          'destLocationName',
          'shipmentTime',
          'carrierName',
          'plateNumber',
          'remarks'
        ],
        tableThead: defautlTableThead,
        listQuery: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59')
          }
        },
        outboundNoticeList: [],
        listLoading: true,
        searchFlag: true,
        downloadLoading: false,
        downloadData: []
      }
    },
    created() {
      this.list()
    },
    watch: {
      theadCheckVal(valArr) {
        this.tableThead = defautlTableThead.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        // 列表查询
        this.listLoading = true
        // 处理是否展开更多
        let queryParam = {}
        if (this.$data.searchFlag) {
          queryParam = this.listQuery
        } else {
          Object.assign(queryParam, this.$data.listQuery)
          queryParam.condition = {
            startDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 00:00:00'),
            endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d} 23:59:59'),
            ownerOrderNo: this.$data.listQuery.condition.ownerOrderNo
          }
        }
        queryParam.condition.houseId = this.$store.getters.currentStorehouse.id
        outboundNoticeAPI.getOutboundNoticeList(queryParam).then(result => {
          this.listLoading = false
          if (result.code === 0) {
            this.$data.outboundNoticeList = result.data.records
            this.$data.listQuery.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      changeStatus() {
        return this.downloadData.map(i => {
          if (i.inboundStatus === '10') {
            i.inboundStatus = '未入库'
          } else if (i.inboundStatus === '20') {
            i.inboundStatus = '部分入库'
          } else if (i.inboundStatus === '30') {
            i.inboundStatus = '全部入库'
          } else {
            i.inboundStatus = '未设置'
          }
          if (!i.inspectStatus || i.inspectStatus === '0') {
            i.inspectStatus = '未质检'
          } else if (i.inspectStatus === '10') {
            i.inspectStatus = '全部合格'
          } else if (i.inspectStatus === '20') {
            i.inspectStatus = '部分合格'
          } else if (i.inspectStatus === '30') {
            i.inspectStatus = '全部破损'
          }
          if (!i.prepareLineStatus || i.prepareLineStatus === '10') {
            i.prepareLineStatus = '未开始'
          } else if (i.prepareLineStatus === '20') {
            i.prepareLineStatus = '已开始'
          } else if (i.prepareLineStatus === '30') {
            i.prepareLineStatus = '已完成'
          } else if (i.prepareLineStatus === '40') {
            i.prepareLineStatus = '已取消'
          }
          if (!i.noticeLineStatus || i.noticeLineStatus === '10') {
            i.noticeLineStatus = '未出库'
          } else if (i.noticeLineStatus === '20') {
            i.noticeLineStatus = '部分出库'
          } else if (i.noticeLineStatus === '30') {
            i.noticeLineStatus = '全部出库'
          } else if (i.noticeLineStatus === '40') {
            i.noticeLineStatus = '关闭出库'
          } else if (i.noticeLineStatus === '50') {
            i.noticeLineStatus = '取消出库'
          }
          return i
        })
      },
      exportExcel() {
        // 数据导出
        // 处理是否展开更多
        let queryParam = {}
        queryParam = this.listQuery.condition
        queryParam.houseId = this.$store.getters.currentStorehouse.id
        this.downloadLoading = true
        outboundNoticeAPI.exportData(queryParam).then(result => {
          this.downloadLoading = false
          if (result.code === 0) {
            this.downloadData = result.data
            if (this.downloadData.length) {
              const arr = this.changeStatus()
              require.ensure([], () => {
                const { export_json_to_excel } = require('@/vendor/Export2Excel')
                const tHeader = ['客户', '客户订单号', '车架号', '供应商', '车型', '司机', '车牌号', '司机联系方式', '入库状态', '质检状态', '备料状态', '出库状态', '调度时间']
                const filterVal = ['ownerId', 'ownerOrderNo', 'lotNo1', 'carrierName', 'materielId', 'driverName', 'plateNumber', 'driverPhone', 'inboundStatus', 'inspectStatus', 'prepareLineStatus', 'noticeLineStatus', 'shipmentTime']
                const data = this.formatJson(filterVal, arr)
                export_json_to_excel(tHeader, data, this.filename)
              })
            }
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      handleSizeChange(val) {
        // 分页size变化
        this.$data.listQuery.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.$data.listQuery.current = val
        this.list()
      },
      moreClick() {
        // 更多click
        this.$data.searchFlag = !this.$data.searchFlag
      },
      searchClick() {
        // 搜索
        this.list()
      },
      reset() {
        this.$data.listQuery.condition = {
          houseId: this.$store.getters.currentStorehouse.id,
          status: null,
          lotNo1: null,
          ownerId: null,
          key: null
        }
        this.list()
      }
    }
  }
</script>
<style scoped>

</style>
